<template>
  <!-- 新增待办 -->
  <input type="text" v-model="todoName" @keydown.enter="addTodo(newTodo(todoName))">
  <!-- 待办列表 -->
  <div v-for="(item, index) in items" :key="index">
    <span>{{ item.id }} - {{ item.name }} - {{ item.completed ? '已完成' : '未完成' }}</span>
  </div>
</template>

<script lang="ts">
type Todo = {
  id: number
  name: string
  completed: boolean
}
export default {
  data () {
    return {
      items: [] as Todo[],
      todoName: ''
    }
  },
  methods: {
    addTodo (todo: Todo): void {
      this.items.push(todo)
      this.todoName = ''
    },
    newTodo (todoName: string): Todo {
      return {
        id: this.items.length + 1,
        name: todoName,
        completed: false
      }
    }
  }
}
</script>

<style></style>